// import { TButton, TDialog, TInput, TPopupProxy, TTable } from 't';
import TButton from 't/basic/button';
import TDialog from 't/basic/dialog';
import TPopupProxy from 't/basic/popup-proxy';
import TTable from 't/basic/table';
import TInput from 't/basic/input';
import { computed, defineComponent, onMounted, ref, toRefs, watch } from 'vue';
import HistoryComponent from './HistoryComponent';
import SingleRow from './SingleRow';
import { useQuasar } from '@teld/q-components';
export default defineComponent({
  name: 'SelectHelperSmallSizeRender',
  components: {
    TPopupProxy,
    TTable,
    HistoryComponent,
    SingleRow,
    TButton,
    TDialog,
    TInput,
  },
  props: {
    simple: {
      type: Boolean,
      default: true,
    },
     width: {
      type: [String, Number],
      default:'1'
    },
    multiple: Boolean,
    height: String,
    position: String,
    historyEnable: Boolean,
    columns: {
      type: Array,
    },
    valueField: String,
    labelField: String,
    helperCode: String,
    placeholder: String,
    pagination:Boolean,
    countPerPage: [Number, Boolean],
    checkList: Array,
    iconEnable: Boolean,
    iconDataSource: String,
    iconFiled: String
  },
  emits: ['update:checkList',],

  setup(props, { attrs, emit, expose, slots }) {
    const refComponent = ref();
    const {
      simple,
      width,
      multiple,
      height,
      position,
      historyEnable,
      columns,
      valueField,
      labelField,
      helperCode,
      placeholder,
      pagination,
      countPerPage,
      checkList,
      iconEnable,
      iconDataSource,
      iconFiled
    } = toRefs(props);
    const $q=useQuasar()
    const refTPopupProxy = ref(null);
    const selection = ref([]);
    const show = () => {
      refTPopupProxy.value&&refTPopupProxy.value.show();
    };
    const close = () => {
      refTPopupProxy.value&&refTPopupProxy.value.hide();
    };
    expose({
      show,
      close,
    });
    onMounted(() => {});

    function onClickHandler(params) {}
    const refSingleRow = ref();
    //简单模式
    const generateSimple = () => {
     

      return (
        <single-row
          ref={refSingleRow}
          width={'100vw'}
          multiple={multiple.value}
          simple={simple.value}
          onUpdateSelectList={e => {
            selectList.value=e
          }}
          placeholder={placeholder.value}
          columns={columns.value}
          labelField={labelField.value}
          valueField={valueField.value}
          filter={filter.value}
          pagination={pagination.value}
          countPerPage={countPerPage.value}
          type='filter'
          checkList={selectList.value}
          iconEnable={iconEnable.value}
          iconDataSource={iconDataSource.value}
          targetSelectList={selectList.value}
          targetSelection={selection.value}
        />
      );
    };
    //已选择数据集合
    const selectList = ref([]);
    watch(() => checkList.value, () => {
      if (JSON.stringify(selectList.value)==JSON.stringify(checkList.value)) return
      selectList.value = JSON.parse(JSON.stringify(checkList.value))
    }, {
      deep: true,
      immediate:true
    })

    //定义点击事件
    const trTargetClick = target => {
      if (selectList.value.some(item => item.name == target.name)) {
        selectList.value = selectList.value.filter(
          item => item.name != target.name,
        );
      } else {
        if (!multiple.value) {
          selectList.value = [];
        }
        selectList.value.push(target);
      }
    };
    const checkAll = computed(() => {
      console.log(rows, selection.value);
      if (rows.every(item => selection.value.some(sel => item.name == sel))) {
        return ['ischecked'];
      } else if (
        !rows.some(item => selection.value.some(sel => item.name == sel))
      ) {
        return [];
      }
      return null;
    });

    watch(
      () => selectList.value,
      () => {
        selection.value = selectList.value.map(item => item[valueField.value]);
        if (!multiple.value) {
          emit('update:checkList', selectList.value);
          close();
        }
      },
      {
        deep: true,
      },
    );
    const filter = ref('');
    const isShow = ref(false);
    //生成内容区域
    const generateContent = () => {
      return isShow.value?generateSimple():'';
    };

    return () => {
      console.log(
        'height:' + height.value
          ? height.value
          : '80vh' +
              ';width:100vw;background:#fff;display: flex; flex-direction: column;',
      );
      return (
        <t-dialog
          ref={refTPopupProxy}
          class='select_helper_popup select_helper_popup_m select_helper_popup_search'
          position={position.value}
          // 如果设置为false 组件限制无法全屏
          maximized={true}
          onShow={() => {
            isShow.value = true;
            filter.value = '';
          }}
          onHide={() => {
            isShow.value = false;
          }}
        >
          <div
            style={
              `${position.value=='right'?'height:100vh':height.value?'height:'+height.value:'height:80vh'}; width:100vw;background:#fff;display: flex; flex-direction: column;`
            }
          >
            <header>
            
              <span>{$q.lang.label.search}</span>
              <i
                class={`${TComponents?.IconList?.common??'fas dx-icon'} ${TComponents?.IconList?.arrowLeft??'icon-t-arrow-left'}`}
                onClick={() => {
                  close();
                }}
              ></i>
            </header>

            <div style='flex: 1 1 auto;overflow: hidden;display:flex;display: flex;flex-direction: inherit;'>
              <div style='padding:0 16px 0px 16px'>
                <t-input
                  class='tr-input-search'
                  borderless
                  outlined={false}
                  dense='dense'
                  clearable
                  labelPosition='left'
                  placeholder={'输入关键字进行搜索'}
                  v-model:modelValue={filter.value}
                  style='margin-top:0px;margin-bottom:6px'
                  tabIndex="0"
                  autocomplete="on"
                  onKeydown={(event) => {
                    if (event&&event.key === 'Enter') {
                      event.preventDefault();
                      // 这里可以添加你的自定义逻辑
                    }
                  }}
                >
                  {{
                    prepend: () => {
                      return (
                        <t-icon
                          name='search'
                          class='cursor-pointer'
                         style='font-size:16px;margin:0 4px 0 8px'
                        />
                      );
                    },
                  }}
                </t-input>

                <history-component
                  labelField={labelField.value}
                  valueField={valueField.value}
                  helperCode={helperCode.value}
                  historyEnable={historyEnable.value}
                  filter={filter.value}
                  fromFilter={true}
                  onClickByTag={e => {
                    if (!multiple.value) {
                      selectList.value = [];
                    }
                    if (
                      selectList.value &&
                      !selectList.value.some(
                        item => item[valueField.value] == e[valueField.value],
                      )
                    ) {
                      selectList.value.push(e);
                    }
                    emit('update:checkList', selectList.value);
                    close();
                  }}
                ></history-component>
              </div>
              {generateContent()}
            </div>
            {(() => {
              if (multiple.value) {
                return (
                  <div class='select_helper_popup_footGroup'>
                    <t-button
                      align='center'
                      class='btn-fixed-width'
                      style='width:50%;border:1px solid #DCDCDC;color: rgba(0, 0, 0, var(--t-color-opacity, /*批量处理90%透明度*/0.9))'
                      onClick={close}
                    >
                      {$q.lang.label.cancel}
                    </t-button>
                    <t-button
                      align='center'
                      class='btn-fixed-width'
                      color='primary'
                      style='width:50%'
                      onClick={() => {
                        emit('update:checkList', selectList.value);
                        filter.value = '';
                        close();
                      }}
                    >
                      {$q.lang.label.ok}
                    </t-button>
                  </div>
                );
              }
            })()}
          </div>
        </t-dialog>
      );
    };
  },
});
